<template>
  <svg-icon icon-class="fullscreen" @click="changeScreen" />
</template>

<script>
import SvgIcon from '@/components/SvgIcon'
// import ScreenFull from 'screenfull'
export default {
  name: 'ScreenFull',
  components: {
    SvgIcon
  },
  data() {
    return {
      temp: false
    }
  },
  methods: {
    changeScreen() {
      // 改变全屏
      // // 方法一 利用全屏插件
      // if (!ScreenFull.isEnabled) {
      //   // 此时全屏不可用
      //   this.$message.warning('此时全屏组件不可用')
      //   return
      // }
      // //   如果可用 就可以全屏
      // ScreenFull.toggle()
      // 方法二、原生JS 全屏方法
      if (!this.temp) {
        document.documentElement.requestFullscreen() // 原生js调用
        this.temp = true
      } else {
        document.exitFullscreen()
        this.temp = false
      }
    }
  }
}
</script>

<style scoped lang="scss">
.svg-icon {
  color: #fff;
  margin-right: .625rem;
  width: 20px;
  height: 20px;
  vertical-align:middle;
}
</style>
